<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="设置" ref="navbar"></fa-navbar>
		<view class="content">
			<view class="">
				<view class="u-margin-top-32 user-menu">
					<u-cell-group :border="false">
						<!-- <u-cell :border="true"
							@click="goPage('/pages/houses/rentOutList')">
							<view
								slot="title"
								class="u-slot-title"
							>
								<text class="u-cell-text">账号与个人信息管理</text>
							</view>
							<view
								slot="icon"
								class="u-slot-icon"
							>
								<image class="u-cell-image" src="../../static/menu/zs.png"></image>
							</view>
							<view slot ="right-icon">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-cell> -->
						<u-cell :border="true" @click="goPage('/pages/my/message')">
							<view slot="title" class="u-slot-title">
								<text class="u-cell-text">用户协议和服务协议</text>
							</view>
							<view slot="right-icon">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-cell>

						<u-cell :border="false" @click="goPage('/pages/my/setting')" label="操作后账号信息无法恢复,请谨慎操作.">
							<view slot="title" class="u-slot-title">
								<text class="u-cell-text">注销账号</text>
							</view>
							<view slot="right-icon">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-cell>


					</u-cell-group>
				</view>
			</view>
		</view>
		<view class="btn-login-out" @click="goOut">
			退出登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {

			goOut() {
				this.$api.goUserLogout().then(res => {
					//退出成功
					uni.$u.vuex('vuex_token', '');
					uni.$u.vuex('vuex_user', {});
					uni.$u.vuex('vuex_openid', '');
					uni.$u.vuex('vuex_lasturl', '');
					uni.$u.vuex('vuex_setting', {});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 188rpx 24rpx 0 24rpx;
	}

	.btn-login-out {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #ffffff;
		color: #1b77fb;
		text-align: center;
		padding: 24rpx 0;
		font-size: 32rpx;
		font-weight: 600;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	}


	.user-menu {
		background-color: #ffffff;
		border-radius: 20rpx;

		.u-slot-value {
			line-height: 17px;
			text-align: center;
			font-size: 10px;
			padding: 0 5px;
			height: 17px;
			color: #FFFFFF;
			border-radius: 100px;
			background-color: #f56c6c;
		}

		.u-slot-title {
			.u-cell-text {
				color: #333333;
				font-size: 30rpx;
			}

		}

		.u-slot-icon {
			margin-top: 8rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		/deep/ .u-cell-group {
			padding: 0 24rpx;
		}

		/deep/ .u-cell__body {
			padding: 33rpx 0rpx;
		}
	}
</style>